<template>
  <div style="border-right: 10px solid #f1f2f6">
    <div
      style="padding-right: 40px; display: flex; justify-content: space-between"
    >
      <h3>上周各业务消费占比</h3>
      <div>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="USD"> USD</a-menu-item>
            <a-menu-item key="GBP"> GBP </a-menu-item>
            <a-menu-item key="EUR"> EUR </a-menu-item>
            <a-menu-item key="CAD"> CAD </a-menu-item>
          </a-menu>
          <a-button size="small">
            {{ currency }} <a-icon type="down" />
          </a-button>
        </a-dropdown>
        <span> 单位：万</span>
      </div>
    </div>
    <a-spin :spinning="spinning" tip="Loading...">
      <div id="mainDom" ref="mainDom" style="height: 350px; width: 100%"></div>
    </a-spin>
  </div>
</template>

<script>
import { home_nowCostCurrency } from "@/apis/system/Home/Home";
const echarts = require("echarts/lib/echarts");
require("echarts/lib/component/title");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/chart/pie");
export default {
  mounted() {
    this.getWeekData();
  },
  data() {
    return {
      currency: "USD",
      spinning: false,
    };
  },
  methods: {
    handleMenuClick(e) {
      this.currency = e.key;
      this.getWeekData(e.key);
    },
    async getWeekData(key = "USD") {
      this.spinning = true;
      let res = await home_nowCostCurrency(key);
      if (res.code === "200") {
        this.series = res.responseBody;
        this.createdEcharts();
        this.spinning = false;
      }
    },
    createdEcharts() {
      var myChart = echarts.init(this.$refs.mainDom);
      var option;
      option = {
        title: {
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          // orient: "vertical",
          bottom: "bottom",
        },
        series: [
          {
            name: "大榕树集团",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.series.orderSumOfMoney * 1, name: "代发入库" },
              { value: this.series.orderOtherSumOfMoney * 1, name: "代发出库" },
              {
                value: this.series.transferOutSumOfMoney * 1,
                name: "转运出库",
              },
              {
                value: this.series.transferIntoSumOfMoney * 1,
                name: "转运入库",
              },
              {
                value: this.series.returnReceptionSumOfMoney * 1,
                name: "退件",
              },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
h3 {
  font-weight: bold;
}
</style>